<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">账单详情</block>
		</cu-custom>
		<view class="tc pt50" style="padding-bottom: 50rpx;background-color: #ff5e1f;">
			<view class="fs26 fw600">
				<image :src="imgurl + '/img10.png'" class="img36 mr10"></image>
				<text class="fs28 text-white fw600">积分充值</text>
			</view>
			<view class="fs66 ff text-white" v-text="'￥'+Order.OrderMoney"><text class="fs26"></text></view>
			<view class="fs26" style="margin-top: -10rpx; color: rgba(255,255,255,0.8);" v-text="bindWay(Order)"></view>
		</view>
		<!-- 时间轴 -->
		<view class="cu-timeline" v-if="Order.state == 1">
			<view class="title fw600 ff margin-bottom">当前状态</view>
			<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">平台审核中</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">已提交线下打款凭证</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">发起充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
		</view>
		<view class="cu-timeline" v-if="Order.state == 2 && Order.PayWay >= 3">
			<view class="title fw600 ff margin-bottom">当前状态</view>
			<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs28 fw600">完成充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.AudiTime"></view></view>
				</view>
			</view>

			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">审核通过，正在为您充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.AudiTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">平台审核中</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">已提交线下打款凭证</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
			<view class="cu-item last_item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">发起充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
		</view>

		<view class="cu-timeline" v-if="Order.state == 2 && (Order.PayWay == 1 || Order.PayWay == 2)">
			<view class="title fw600 ff margin-bottom">当前状态</view>
			<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs28 fw600">完成充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.AudiTime"></view></view>
				</view>
			</view>

			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">正在为您充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.AudiTime"></view></view>
				</view>
			</view>

			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">完成支付</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
			<view class="cu-item last_item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">发起充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
		</view>

		<view class="cu-timeline" v-if="Order.state == 3">
			<view class="title fw600 ff margin-bottom">当前状态</view>

			<view class="cu-item first_item" :style="'background-image: url(' + imgurl + 'icon_check02.png);'">
				<view class="content">
					<view class="flex justify-between align-center">
						<view class="fs24 text-gray">
							审核不通过，原因：
							<text v-text="Order.AudiRemark"></text>
						</view>
					</view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.AudiTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">平台审核中</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">已提交线下打款凭证</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
			<view class="cu-item last_item">
				<view class="content">
					<view class="flex justify-between align-center"><view class="fs24 text-gray">发起充值</view></view>
					<view class="flex justify-between align-center "><view class="fs20 text-muted" v-text="Order.PayTime"></view></view>
				</view>
			</view>
		</view>

		<view class="qui-cells mt15">
			<view class="qui-cell">
				<view class="cell-hd fs24 text-gray">
					<view>获得积分(包含赠送)</view>
					<view class="mt20" v-if="Order.SendNum>0">赠送积分</view>
				</view>
				<view class="cell-bd tr fs24">
					<view>
						
						<text v-text="Order.Points+Order.SendNum"></text>
					</view>
					<view class="mt20" v-if="Order.SendNum>0">
						
						<text v-text="Order.SendNum"></text>
					</view>
				</view>
			</view>
			<view class="qui-cell">
				<view class="cell-hd fs24 text-gray">
					<view>订单号</view>
					<view class="mt20" v-if="Order.PayNo != null">支付单号</view>
				</view>
				<view class="cell-bd tr fs24">
					<view v-text="Order.rechargeOrder"></view>
					<view class="mt20" v-text="Order.PayNo" v-if="Order.PayNo != null"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import base from 'utils/base.js';
export default {
	data() {
		return {
			navi: true,
			imgurl: this.$imgurl,
			tip: '',
			Order: {},
			ImgDomain: ''
		};
	},
	onLoad: function(option) {
		let globalData = getApp().globalData;
		this.ImgDomain = globalData.ImgDomain;
		if (option.BusinessID) this.GetRechargeOrderByID(option.BusinessID);
		if (option.orderNo) this.GetRechargeOrderByOrderID(option.orderNo);
           
		this.tip = unescape(option.tip);
		
		if(option.orderNo || option.nav==1) this.navi=false;
	},
	back: function() {
		if (this.navi)
			uni.navigateBack({
				delta: 1
			});
		else
			uni.navigateTo({
				url: '/pages/my/my'
			});
	},
	methods: {
		bindWay: function(Order) {
			let msg = '充值方式-';
			if (Order.PayWay == 1) msg = msg + '支付宝支付';
			else if (Order.PayWay == 2) msg = msg + '微信支付';
			else if (Order.PayWay == 3) msg = msg + '支付宝线下转账';
			else if (Order.PayWay == 4) msg = msg + '微信线下转账';
			else if (Order.PayWay == 5) msg = msg + '银联卡线下转账';
			return msg;
		},
		GetRechargeOrderByID: function(BusinessID) {
			let currentPage = this;

			let params = {
				type: 'GET',
				url: '/api/Recharge/GetRechargeOrderByID',
				data: {
					id: BusinessID
				},
				sCallback: function(response) {
					if (response.IsSuccess) {
						currentPage.Order = response.Data;
					} else {
						uni.showToast({
							title: response.Msg
						});
					}
				}
			};
			base.request(params);
		},
		GetRechargeOrderByOrderID: function(orderNo) {
			let currentPage = this;

			let params = {
				type: 'GET',
				url: '/api/Recharge/GetRechargeOrderByOrderID',
				data: {
					orderNo: orderNo
				},
				sCallback: function(response) {
					if (response.IsSuccess) {
						currentPage.Order = response.Data;
					} else {
						uni.showToast({
							title: response.Msg
						});
					}
				}
			};
			base.request(params);
		}
	}
};
</script>

<style lang="scss">
.img36 {
	width: 36rpx;
	height: 36rpx;
	position: relative;
	top: 6rpx;
}

.fs66 {
	font-size: 66rpx;
}
.cu-timeline > .cu-item::after {
	left: 16rpx;
	width: 0rpx;
	top: 30rpx;
	border-left: 2rpx dashed rgba(22, 82, 222, 0.2);
	background-color: transparent;
}
.cu-timeline {
	background-color: #fff;
	padding: 30rpx;
	.cu-item {
		padding-top: 0px;
	}
	.content {
		background-color: transparent !important;
		padding: 0 !important;
	}
}
.cu-timeline > .cu-item::before {
	left: 0rpx;
	font-size: 24rpx;
	width: 32rpx;
	height: 32rpx;
	line-height: 32rpx;
	top: 20rpx;
}
.cu-timeline > .cu-item {
	padding-left: 45rpx;
	padding-right: 0px;
}
.last_item {
	&:after {
		display: none !important;
	}
}
.first_item {
	background-repeat: no-repeat;
	z-index: 999;
	background-size: 30rpx 30rpx;
	&:before {
		display: none;
	}
}
</style>
